<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="{{url_for('static', filename='themes/default/css/login.css')}}">
    <script type="application/javascript" src="{{url_for('static', filename='js/jquery.min.js')}}"></script>

</head>
<body>
    <div class="login-box">
        <div class="box-con tran">
            <div class="login-con f-l">
                <div class="form-group">
                    <input type="text" name="username" placeholder="用户名" onblur="verify.verifyUserName(this)">
                    <span class="error-notic"></span>
                </div>
                <div class="form-group">
                    <input type="password" name="password" placeholder="密码" onblur="verify.verifyPassWord(this)">
                    <span class="error-notic"></span>
                </div>
                <div class="form-group">
                    <button type="submit" class="tran pr login-btn">
                        登录
                    </button>
                </div>
                <div class="from-line"></div>
                <div class="form-group">
                    <a href="javascript:;" class="move-signup a-tag tran blue-border">
                        没帐号？注册咯。
                    </a>
                </div>
                <div class="form-group">
                    <a href="javascript:;" class="move-reset a-tag tran">
                        忘记密码？重置
                    </a>
                </div>
            </div>
            <div class="signup f-l">
                <div class="form-group">
                    <input type="text" name="regusername" placeholder="用户名" onblur="verify.verifyRegUserName(this)">
                    <span class="error-notic"></span>
                </div>
                <div class="form-group">
                    <input type="text" name="nickname" placeholder="昵称" onblur="verify.verifyNickName(this)">
                    <span class="error-notic"></span>
                </div>
                <div class="form-group">
                    <input type="password" name="regpassword" placeholder="密码（字母、数字，至少6位）" onblur="verify.PasswordLenght(this)">
                    <span class="error-notic"></span>
                </div>
                <div class="form-group">
                    <button type="submit" class="tran pr register-btn">
                        注册
                    </button>
                </div>
                <div class="from-line"></div>
                <div class="form-group">
                    <a href="javascript:;" class="move-login a-tag tran blue-border">
                        已有帐号？登录
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script type="application/javascript">
        $(function() {
            suerLogon = false;
            //步骤切换
			var _boxCon=$(".box-con");
			$(".move-login").on("click",function(){
				$(_boxCon).css({
					'marginLeft':0
				})
			});
			$(".move-signup").on("click",function(){
				$(_boxCon).css({
					'marginLeft':-320
				})
			});

            //Login
			$(".login-btn").on("click", function () {
                var username = $("input[name='username']"),
                password = $("input[name='password']");
                if(!username.val()){
                    showNotic($(username), "用户名不能为空");
                    return false;
                }
                if(!password.val()){
                    showNotic($(password), "密码不能为空");
                    return false;
                }
                $.ajax({
                    url: "./login"
                    ,type: "POST"
                    ,dataType: "json"
                    ,data: {username:username.val(), password:password.val()}
                    ,success: function (data) {
                        if(data.code==0) {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.msg("登陆成功！");
                            setTimeout(function () {
                                parent.layer.close(index);
                                parent.location.reload();
                            },2000);
                        } else {
                            if(data.msg == "账号错误") {
                                showNotic($(username), "用户名不存在");
                            }
                            if(data.msg == "密码错误") {
                                showNotic($(password), "密码错误");
                            }
                            if(data.msg == "帐号被禁止") {
                                parent.layer.msg("帐号被禁止", {icon: 4});
                            }
                        }
                    }
                });
            });

			// register
			$(".register-btn").on("click", function () {
                var username = $("input[name='regusername']"),
                password = $("input[name='regpassword']"),
                nickname = $("input[name='nickname']");
                if(!username.val()){
                    showNotic($(username), "用户名不能为空");
                    return false;
                }
                if(!password.val()){
                    showNotic($(password), "密码不能为空");
                    return false;
                }
                if(!nickname.val()){
                    showNotic($(nickname), "昵称不能为空");
                    return false;
                }
                $.ajax({
                    url: "./register"
                    ,type: "POST"
                    ,dataType: "json"
                    ,data: {username:username.val(), password:password.val(), nickname:nickname.val()}
                    ,success: function (data) {
                        if(data.code==0) {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.msg("注册成功！");
                            setTimeout(function () {
                                parent.layer.close(index);
                                parent.location.reload();
                            },2000);
                        } else {
                            if(data.msg == "用户名已存在") {
                                showNotic($(username), "用户名已存在");
                            }
                            if(data.msg == "密码格式错误") {
                                showNotic($(password), "密码格式错误");
                            }
                        }
                    }
                });
            });

        });

        //表单验证
        function showNotic(_this, msg){
            $(_this).parents(".form-group").find(".error-notic").text(msg).fadeIn(100);
            $(_this).focus();
        }//错误提示显示

        function hideNotic(_this){
            $(_this).parents(".form-group").find(".error-notic").fadeOut(100);
        }//错误提示隐藏
        var verify = {
            verifyUserName:function(_this){
                if(!$(_this).val()){
                    showNotic(_this, "用户名不能为空");
                }else{
                    hideNotic(_this)
                }
            },
            verifyPassWord:function(_this){
                if(!$(_this).val()){
                    showNotic(_this, "密码不能为空");
                }else{
                    hideNotic(_this)
                }
            },
            verifyRegUserName:function(_this){
                var _length=$(_this).val().length;
                if(_length<5){
                    showNotic(_this, "用户名太短了，走点心好么")
                }else{
                    hideNotic(_this)
                }
            },//验证用户名
            PasswordLenght:function(_this){
                var reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);
                if (!reg.test($(_this).val())) {
                    showNotic(_this, "密码太简单了，走点心好么")
                    return
                }else{
                    hideNotic(_this)
                }
                var _length=$(_this).val().length;
                if(_length<5 || _length>=16){
                    showNotic(_this, "密码应该6-16位，请走心")
                }else{
                    hideNotic(_this)
                }
            },//验证设置密码长度
            verifyNickName:function(_this){
                var _length=$(_this).val().length;
                if(_length<6){
                    showNotic(_this, "昵称太短了，请走心")
                }else{
                    hideNotic(_this)
                }
            }
        }
    </script>
</body>
</html>